<style>
   .log_tab {/*table-layout: fixed;*/word-break: break-all; word-wrap:break-word;}
</style>

<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志列表</h3>
				<div class="box-tools pull-right">
				</div>
			</div>
			<div class="box-body">
				<div class="form-group">
					<div class="col-md-3">
						<div class="input-group date ">
							<div class="input-group-addon">
								<i class="fa fa-calendar"></i>
							</div>
							<input type="text" class="form-control pull-right" id="logstartDate" placeholder="选择开始时间...">
						</div>
					</div>
                    <div class="col-md-3">
                        <div class="input-group date ">
                            <div class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </div>
                            <input type="text" class="form-control pull-right" id="logendDate" placeholder="选择结束时间...">
                        </div>
                    </div>
					<div class="col-md-3">
						<div class="input-group">
							<span class="input-group-addon"><i class="fa fa-search"></i></span>
							<input type="text" class="form-control" id="logId" placeholder="根据用户名搜索...">
						</div>
					</div>
					<div class="col-md-3">
						<button type="button" onclick="logReload();" class="btn btn-primary">搜索</button>
					</div>
				</div>
                <div class="col-md-12">
				<table id="log_tab" class="table table-bordered table-striped log_tab">
					<thead>
						<tr>
							<tr>
								<th width="20%">用户名</th>
								<th width="20%">登录IP</th>
								<th width="20%">登录时间</th>
								<th>备注</th>
							</tr>
						</tr>
					</thead>
				</table>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
var log_tab;

$(function() {

	//初始化时间选择器
	$('#logstartDate').datepicker({
		language: 'zh-CN',
		format: 'yyyy-mm-dd',
		autoclose: true,
		todayHighlight: true
	});
	$('#logendDate').datepicker({
		language: 'zh-CN',
		format: 'yyyy-mm-dd',
		autoclose: true,
		todayHighlight: true
	});
	//初始化表格
	
	log_tab = $('#log_tab').DataTable({
		"dom":'itflp',
		"processing":true,
		"searching":false,
		"serverSide":true, //启用服务器端分页
		"bInfo":false,
        "bSort":false,
		"language":{"url":"plugins/datatables/language.json"},
		"ajax":{"url":"/admin/log/page","type":"post"},
		"columns":[
            {"data":"username"},
            {"data":"loginIp"},
		    {"data":"gmtCreate"},
            {"data":"remark"}
			],
		"columnDefs" : [
			]
	}).on('xhr.dt', function ( e, settings, data ,xhr) {
	   dataTableMsg(data,xhr);
    } );
});

function logReload(){
	var startDate = $("#logstartDate").val();
    var endDate = $("#logendDate").val();
	var searchKey = $("#logId").val();
	var param = {
		"startDate" : startDate,
        "endDate" : endDate,
		"searchKey" : searchKey
	};
	log_tab.settings()[0].ajax.data = param;
	log_tab.ajax.reload();
}

</script>